<template>
  <div :id="demo_class" :style="{height:style_height.height,width:style_height.width}"></div>
</template>

<script>
import {
  onMounted,
  inject,
  reactive
} from "vue"
import {get_exception_data} from "@/api/cockpit/data";
import {handle_data_for_field} from "@/utils/get_data_for_field";
import {getStyleByEl} from "@/utils/dom/get_dom_style";


export default {
  name: "exception_bar",
  props: {
    demo_class: ""
  },
  setup(props,context) {
    let echarts = inject("echarts");//引入
    const style_height = reactive({
      height: "",
      width: ""
    })

    const get_data = async () => {
      const {height, width} = await get_style_dom(props.demo_class)
      style_height.height = height;
      style_height.width = width;
      const res = await get_exception_data()
      if (res.code === 1) {
        console.log(res)
        init_charts(res.data)
      }
    }

    const get_style_dom = (dom) => {
      const el = document.getElementById(dom);
      const style = getStyleByEl(el)
      const height = style.height;
      const width = style.width;
      return {
        height,
        width
      }
    }

    const init_charts = (data) => {
      let chartDom = document.getElementById(props.demo_class);
      const myChart = echarts.init(chartDom);
      let option;
      const x_data = handle_data_for_field(data, 'equipmentCode')
      const y_data = handle_data_for_field(data, 'exRange')

      function handle_data() {
        if (x_data.length > 10) {
          return true;
        }
        return false;
      }

      option = {
        color: ["orange"],
        xAxis: {
          type: 'category',
          data: x_data,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#1F7EFF',
              width: 1
            }
          },
          axisTick: {
            show: false
          }
        },

        yAxis: {
          type: 'value',
          splitLine: {
            show: false,
            lineStyle: {
              color: '#1F7EFF',
              width: 1
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#1F7EFF',
              width: 1
            }
          },
          axisTick: {
            show: true
          }
        },
        grid: {
          left: 30,
          right: 20,
          bottom: 70,
          top: 30,
        },
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'cross',
        //     crossStyle: {
        //       color: '#999'
        //     }
        //   }
        // },
        tooltip: {
          trigger: 'item',
// 悬浮框背景颜色
          backgroundColor: '#fff',
// 悬浮框边框颜色
          borderColor: '#000',
          textStyle: {
            color: '#1F7EFF',
            align: 'left'
          },
          formatter: function (a, b) {
// 可以通过回调返回的参数判断选择的是哪一个，除了name还有其他标识，看个人需求
            if (a.name) {
              console.log(a)
              //可以获取一个dataIndex 数据的索引值
              // return a.name
              return `<span style="color: #0c1c2d">设备编号：</span>${a.name} <br>
                       <span style="color: #0c1c2d">设备名称：</span>${a.name} <br>
                       <span style="color: #0c1c2d">异常率：</span>${a.data} %`;
            }
          },
        },
        // backgroundColor: {
        //   type: 'linear',
        //   x: 0,
        //   y: 0,
        //   x2: 0,
        //   y2: 1,
        //   colorStops: [{
        //     offset: 0, color: 'rgba(70, 131, 254, 0)' // 0% 处的颜色
        //   }, {
        //     offset: 1, color: 'rgba(70, 131, 254, 0.5)' // 100% 处的颜色
        //   }],
        //   global: false // 缺省为 false
        // },
        legend: {
          data: [
            {name: '电流1', icon: 'circle'},
            {name: '电压1', icon: 'circle'},
            {name: '电流'},
            {name: '电压'}
          ],
          textStyle: {
            color: '#ffffff',
            fontSize: 11
          },
          y: 'top',
          x: 'center',
        },
        dataZoom: [
          {
            show: handle_data(),
            start: 0,
            end: 100,

          },
          {
            type: 'inside',
            start: 94,
            end: 100
          },
          {
            show: false,
            yAxisIndex: 0,
            filterMode: 'empty',
            width: 2,
            height: '10%',
            showDataShadow: false,
            left: '0'
          }
        ],

        series: [{
          // data: [120, 22,
          //   // {
          //   //   value: 200,
          //   //   itemStyle: {
          //   //     color: '#a90000'
          //   //   }
          //   // },
          //   150, 80, 70, 110, 130],
          data: y_data,
          type: 'bar',
          label: {
            normal: {
              show: true,
              position: 'top',
              color: "#278df3"
            },
            color: "#278df3"
          },
        }]
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }

    onMounted(() => {

    })

    const init = () => {
      get_data();
    }

    return {
      style_height,
      init
    }

  },
//   methods: {
//     async get_data() {
//       const res = await get_exception_data()
//       if (res.code === 1) {
//         console.log(res)
//         this.init(res.data)
//       }
//     },
//     init(data) {
//       let chartDom = document.getElementById('exception_bar');
//       const myChart = echarts.init(chartDom);
//       let option;
//       const x_data = handle_data_for_field(data, 'equipmentCode')
//       const y_data = handle_data_for_field(data, 'exRange')
//
//       function handle_data() {
//         if (x_data.length > 10) {
//           return true;
//         }
//         return false;
//       }
//
//       option = {
//         color: ["orange"],
//         xAxis: {
//           type: 'category',
//           data: x_data,
//           axisLine: {
//             show: true,
//             lineStyle: {
//               color: '#1F7EFF',
//               width: 1
//             }
//           },
//           axisTick: {
//             show: false
//           }
//         },
//
//         yAxis: {
//           type: 'value',
//           splitLine: {
//             show: false,
//             lineStyle: {
//               color: '#1F7EFF',
//               width: 1
//             }
//           },
//           axisLine: {
//             show: true,
//             lineStyle: {
//               color: '#1F7EFF',
//               width: 1
//             }
//           },
//           axisTick: {
//             show: true
//           }
//         },
//         grid: {
//           left: 30,
//           right: 20,
//           bottom: 70,
//           top: 30,
//         },
//         // tooltip: {
//         //   trigger: 'axis',
//         //   axisPointer: {
//         //     type: 'cross',
//         //     crossStyle: {
//         //       color: '#999'
//         //     }
//         //   }
//         // },
//         tooltip: {
//           trigger: 'item',
// // 悬浮框背景颜色
//           backgroundColor: '#fff',
// // 悬浮框边框颜色
//           borderColor: '#000',
//           textStyle: {
//             color: '#1F7EFF',
//             align: 'left'
//           },
//           formatter: function (a, b) {
// // 可以通过回调返回的参数判断选择的是哪一个，除了name还有其他标识，看个人需求
//             if (a.name) {
//               console.log(a)
//               //可以获取一个dataIndex 数据的索引值
//               // return a.name
//               return `<span style="color: #0c1c2d">设备编号：</span>${a.name} <br>
//                        <span style="color: #0c1c2d">设备名称：</span>${a.name} <br>
//                        <span style="color: #0c1c2d">异常率：</span>${a.data} %`;
//             }
//           },
//         },
//         // backgroundColor: {
//         //   type: 'linear',
//         //   x: 0,
//         //   y: 0,
//         //   x2: 0,
//         //   y2: 1,
//         //   colorStops: [{
//         //     offset: 0, color: 'rgba(70, 131, 254, 0)' // 0% 处的颜色
//         //   }, {
//         //     offset: 1, color: 'rgba(70, 131, 254, 0.5)' // 100% 处的颜色
//         //   }],
//         //   global: false // 缺省为 false
//         // },
//         legend: {
//           data: [
//             {name: '电流1', icon: 'circle'},
//             {name: '电压1', icon: 'circle'},
//             {name: '电流'},
//             {name: '电压'}
//           ],
//           textStyle: {
//             color: '#ffffff',
//             fontSize: 11
//           },
//           y: 'top',
//           x: 'center',
//         },
//         dataZoom: [
//           {
//             show: handle_data(),
//             start: 0,
//             end: 100,
//
//           },
//           {
//             type: 'inside',
//             start: 94,
//             end: 100
//           },
//           {
//             show: false,
//             yAxisIndex: 0,
//             filterMode: 'empty',
//             width: 2,
//             height: '10%',
//             showDataShadow: false,
//             left: '0'
//           }
//         ],
//
//         series: [{
//           // data: [120, 22,
//           //   // {
//           //   //   value: 200,
//           //   //   itemStyle: {
//           //   //     color: '#a90000'
//           //   //   }
//           //   // },
//           //   150, 80, 70, 110, 130],
//           data: y_data,
//           type: 'bar',
//           label: {
//             normal: {
//               show: true,
//               position: 'top',
//               color: "#278df3"
//             },
//             color: "#278df3"
//           },
//         }]
//       };
//       myChart.setOption(option);
//       window.addEventListener("resize", function () {
//         myChart.resize();
//       });
//     }
//   },
  mounted() {
    // this.get_data()
  }
}
</script>

<style scoped lang="scss">
#exception_bar {
  //height: 22rem;
  width: 100%;
}
</style>
